<style lang="less">
    @import 'index.less';
</style>
<template>
    <div class="left-panel" v-bind:class="[showPanel ? 'show-right-panel' : (hidePanel ? 'hide-right-panel' : '')]">
        <div class="left-panel-content-top-bar">
            <div class="content-top-bar-left">
                <Button type="text" @click="back"><Icon type="chevron-left"></Icon>&nbsp;&nbsp;返回</Button>
            </div>
            <div class="content-top-bar-right">
                <slot name="right">
                </slot>
            </div>
        </div>

        <div class="left-panel-content-body">
            <slot>
            </slot>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'Sticky',
        props: {
            value: {
                type: Boolean,
                default: false
            },
        },
        watch:{
            value(val) {
                this.showPanel = val;
            },
            showPanel(val) {
                this.$emit('input', val);
            }
        },
        data() {
            return {
                showPanel: false,
                hidePanel: false,
            }
        },
        methods: {
            back() {
                this.hidePanel = true;
                this.showPanel = false;
                this.$emit('on-break');
            }
        },
        mounted() {
            if (this.value) {
                this.showPanel = true;
            }
        }
    }
</script>